<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea placeholder="请输入消息"></textarea>
    <button>发送</button>
    <h1>消息列表</h1>
    <div class="list"><p>默认的消息</p></div>

    <script>
      // 获取页面中的textarea、button、h1和.list元素
      const textarea = document.querySelector("textarea");
      const button = document.querySelector("button");
      const h1 = document.querySelector("h1");
      const list = document.querySelector(".list");

      // parentNode	查找父节点
      // children	查找子节点（返回伪数组）
      // previousElementSibling	查找前一个兄弟节点
      // nextElementSibling	查找后一个兄弟节点
      // createElement()	创建空节点
      // append()	结尾添加节点
      // prepend()	开头添加节点
      // remove()	删除节点

      // 为button元素添加点击事件监听器
      button.addEventListener("click", () => {
        // 在点击按钮时，获取textarea中的内容，并去除两端空格
        const message = textarea.value.trim();
        // 创建一个新的p元素 <p></p> createElement：创建节点
        const newP = document.createElement("p"); //  <p></p>
        // 将获取到的消息内容赋值给新的p元素 <p>message</p>
        newP.innerText = message; //  <p>message</p>
        // 将新的p元素插入到list元素的最前面/后面
        list.prepend(newP); // 场景1: 发送的朋友圈在前面添加
        // list.append(newP);  // 场景2: 微信聊天消息在末尾添加

        // 为新的p元素添加点击事件监听器
        newP.addEventListener("click", () => {
          // 在点击p元素时，移除该p元素
          newP.remove();
        });
      });
    </script>
  </body>
</html>
